<template>
  <el-popover placement="bottom" trigger="hover" width="300">
    <template #reference>
      <el-button size="small" circle>
        <el-icon><question-filled /></el-icon>
      </el-button>
    </template>

    <div class="dependency-help">
      <h4 class="help-title">依赖关系说明</h4>
      <ul class="help-list">
        <li>
          <strong>完成-开始 (FS)</strong>
          : 前一个任务完成后，后一个任务才能开始
        </li>
        <li>
          <strong>开始-开始 (SS)</strong>
          : 前一个任务开始后，后一个任务才能开始
        </li>
        <li>
          <strong>完成-完成 (FF)</strong>
          : 前一个任务完成后，后一个任务才能完成
        </li>
        <li>
          <strong>开始-完成 (SF)</strong>
          : 前一个任务开始后，后一个任务才能完成
        </li>
      </ul>
    </div>
  </el-popover>
</template>

<script setup lang="ts">
import { QuestionFilled } from '@element-plus/icons-vue';
</script>

<style scoped>
.dependency-help {
  font-size: 0.875rem;
}

.help-title {
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.help-list {
  list-style-type: disc;
  padding-left: 1.25rem;
  margin-top: 0.25rem;
}
</style>
